<template>
  <div class="mod-service-notifyTemplate">
    <!-- 搜索栏 -->
    <div class="search-bar">
      <el-form
        ref="searchFormRef"
        :inline="true"
        :model="dataForm"
        label-width="auto"
        class="search-form"
        @submit.prevent
        @keyup.enter="getDataList(page)"
      >
        <div class="input-row">
          <el-form-item
            :label="$t('admin.sendTime') + ':'"
            class="search-form-item"
          >
            <el-date-picker
              v-model="dateRange"
              type="datetimerange"
              range-separator="-"
              value-format="YYYY-MM-DD HH:mm:ss"
              format="YYYY-MM-DD HH:mm:ss"
              :start-placeholder="$t('date.start')"
              :end-placeholder="$t('date.end')"
              :default-time="defaultTime"
            />
            <div class="operation-box">
              <div
                class="default-btn"
                @click="setDateRange(1)"
              >
                {{ $t('date.t') }}
              </div>
              <div
                class="default-btn"
                @click="setDateRange(2)"
              >
                {{ $t('date.y') }}
              </div>
              <div
                class="default-btn"
                @click="setDateRange(3)"
              >
                {{ $t('date.n') }}
              </div>
              <div
                class="default-btn"
                @click="setDateRange(4)"
              >
                {{ $t('m') }}
              </div>
            </div>
          </el-form-item>
          <el-form-item>
            <div
              class="default-btn primary-btn"
              @click="onSearch(true)"
            >
              {{ $t('coupon.query') }}
            </div>
          </el-form-item>
        </div>
      </el-form>
    </div>

    <div class="main-container">
      <!-- 表格 -->
      <div class="table-con notify-log-table">
        <el-table
          :data="dataList"
          header-cell-class-name="table-header"
          style="width: 100%"
        >
          <el-table-column
            :label="$t('sysManagement.serialNumber')"
            type="index"
            :index="1"
            align="left"
            width="80"
          />
          <el-table-column
            align="left"
            prop="message"
            width="400"
            :label="$t('platform.messageContent')"
          >
            <template #default="scope">
              <div class="table-cell-text">
                {{ scope.row.message }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="userMobile"
            :label="$t('platform.sendPhoNum')"
          />
          <el-table-column
            prop="remindType"
            align="center"
            :label="$t('platform.notifyType')"
          >
            <template #default="scope">
              <span v-if="scope.row.remindType === 1">{{ $t('platform.smsMessage') }}</span>
              <span v-if="scope.row.remindType === 2">
                {{ $t('platform.officialAccountNews') }}
              </span>
              <span v-if="scope.row.remindType === 3">{{ $t('platform.appletMessage') }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="status"
            :label="$t('platform.sendStatus')"
          >
            <template #default="scope">
              <span v-if="scope.row.status === 1 || scope.row.remindType === 3">
                {{ $t('order.success') }}
              </span>
              <span v-if="scope.row.status === 0 && scope.row.remindType !== 3">
                {{ $t('order.fail') }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="createTime"
            :label="$t('admin.sendTime')"
          />
        </el-table>
      </div>

      <!-- 分页 -->
      <el-pagination
        v-if="dataList.length"
        :current-page="page.pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="page.pageSize"
        :total="page.total"
        layout="total, sizes, prev, pager, next, jumper"
        @update:page-size="onPageSizeChange"
        @update:current-page="onPageChange"
      />
    </div>
  </div>
</template>

<script setup>
import moment from 'moment'

const searchFormRef = ref(null)
let tempSearchForm = null // 保存上次点击查询的请求条件
let theParams = null // 保存上次点击查询的请求条件

const dataList = ref([])
const page = reactive({
  total: 0, // 总页数
  currentPage: 1, // 当前页数
  pageSize: 10 // 每页显示多少条
})

// eslint-disable-next-line no-unused-vars
const typeMap = new Map([
  // [1, '订单催付'],
  [1, $t('platform.orderPay')],
  // [2, '付款成功通知'],
  [2, $t('platform.paySuccNotify')],
  // [3, '商家同意退款'],
  [3, $t('platform.merAgreeRefund')],
  // [4, '商家拒绝退款'],
  [4, $t('platform.merRefuseRefund')],
  // [5, '核销提醒'],
  [5, $t('platform.wriOffRem')],
  // [6, '发货提醒'],
  [6, $t('platform.shipRem')],
  // [7, '拼团失败提醒'],
  [7, $t('platform.groupFailRem')],
  // [8, '拼团成功提醒'],
  [8, $t('platform.groupSuccRem')],
  // [9, '拼团开团提醒'],
  [9, $t('platform.startGroupRem')],
  // [10, '会员升级提醒'],
  [10, $t('platform.memUpRem')],
  // [101, '退款临近超时提醒'],
  [101, $t('platform.timeoutRem')],
  // [102, '确认收货提醒'],
  [102, $t('platform.confirmReceRem')],
  // [103, '买家发起退款提醒'],
  [103, $t('platform.buyerRefundRem')],
  // [104, '买家已退货提醒']
  [104, $t('platform.buyerReturnRem')]
])

const dataForm = reactive({})
const searchForm = reactive({}) // 搜索
const dataListLoading = ref(false)
const dateRange = ref([])
const defaultTime = ref([
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59)
])
// const shopWallet = ref({})

onMounted(() => {
  getDataList()
  // getShopWalletInfo()
})

// const getShopWalletInfo = () => {
//   http({
//     url: http.adornUrl('/shop/shopWallet/info'),
//     method: 'get',
//     params: http.adornParams()
//   }).then(({ data }) => {
//     shopWallet.value = data
//   })
// }
const getDataList = (pageParam, newData = false) => {
  dataListLoading.value = true
  if (newData || !tempSearchForm) {
    theParams = JSON.parse(JSON.stringify(searchForm))
    tempSearchForm = {
      current: pageParam == null ? page.currentPage : pageParam.currentPage,
      size: pageParam == null ? page.pageSize : pageParam.pageSize,
      startTime: dateRange.value === null ? null : dateRange.value[0], // 开始时间
      endTime: dateRange.value === null ? null : dateRange.value[1] // 结束时间
    }
  } else {
    tempSearchForm.current = page == null ? 1 : page.currentPage
    tempSearchForm.size = page == null ? 10 : page.pageSize
  }
  http({
    url: http.adornUrl('/admin/notifyLog/page'),
    method: 'get',
    params: http.adornParams(Object.assign(tempSearchForm, theParams))
  }).then(({ data }) => {
    dataList.value = data.records
    page.total = data.total
    dataListLoading.value = false
  })
}
// 每页数
const onPageSizeChange = val => {
  page.pageSize = val
  page.currentPage = 1
  getDataList()
}
// 当前页
const onPageChange = val => {
  page.currentPage = val
  getDataList()
}
/**
 * 根据选项设置时间
 * 1:今天 2:昨天 3: 近七天 4:近30天 5:近60天
 */
const setDateRange = val => {
  let startDay = null
  let endDay = null
  if (val === 1) {
    startDay = 0
    endDay = 0
  } else if (val === 2) {
    startDay = -1
    endDay = -1
  } else if (val === 3) {
    startDay = -7
    endDay = -1
  } else if (val === 4) {
    startDay = -30
    endDay = -1
  } else {
    return
  }
  // 开始时间
  const startTime = moment().add(startDay, 'days').startOf('days').format('LL')
  // 结束时间
  const endTime = moment().add(endDay, 'days').endOf('days').format('LL')
  dateRange.value = [startTime, endTime]
}
// 搜索查询
const onSearch = (newData = false) => {
  page.currentPage = 1
  getDataList(page, newData)
}
</script>

<style lang="scss" scoped>
.mod-service-notifyTemplate {
  .operation-box {
    display: inline-block;
    margin-left: 30px;
  }
}
</style>
